<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">
    //创建组件
    class Count extends React.Component {
        constructor(props) {
            console.log('Count---constructor')
            super(props);
            this.state = {count: 0}
        }

        state = {count: 0}

        add = () => {
            const {count} = this.state
            this.setState({count: count + 1})
        }

        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        componentWillMount() {
            console.log('Count---componentWillMount')
        }

        // 组件挂载完毕的钩子
        componentDidMount() {
            console.log('Count---componentDidMount')
        }

        // 组件将要卸载的钩子
        componentWillUnmount() {
            console.log('Count---componentWillUnmount')
        }

        //控制组件更新的“阀门”
        shouldComponentUpdate() {
            console.log('Count---shouldComponentUpdate')
            return true
        }

        //组件将要更新的钩子
        componentWillUpdate() {
            console.log('Count---componentWillUpdate')
        }

        //组件更新完毕的钩子
        componentDidUpdate() {
            console.log('Count---componentDidUpdate')
        }

        render() {
            console.log('Count---render')
            const {count} = this.state
            return (
                <div>
                    <h2>当前求和为:{count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                </div>
            )
        }
    }

    //2.渲染组件到页面
    ReactDOM.render(<Count></Count>, document.getElementById('test'))
</script>
</body>
</html>

